<template>
  <div>
    <main v-if="list.length > 0" class="list">
      <router-link
        v-for="(item, index) in list"
        :key="index"
        :to="{
          name: 'm-news-show',
          params: {
            id: item.id
          }
        }" class="item">
        <div class="title">{{ item.title }}</div>
        <div class="desc">{{ item.desc }}</div>
      </router-link>
    </main>
    <div v-else class="empty">暂无数据</div>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { Toast, Indicator } from 'mint-ui';

export default {
  name: "MHome",
  computed: {
    ...mapState('m_news', ['list'])
  },
  async created() {
    // this.$store.dispatch('m_news/getList')
    try {
      Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      });
      await this.getList()
    } catch (e) {
      Toast({
        message: '网络错误',
      });
    } finally {
      Indicator.close();
    }
  },
  methods: {
    ...mapActions('m_news', ['getList']),
  }
}
</script>

<!-- css作用域 -->
<style lang="less" scoped>
main {
  /*padding-bottom: 1rem;*/
  padding: 0 .2rem 1rem;
  /*background: #8d1dfd;*/
  /*height: 100vh;*/

  .item {
    display: block;
    border-bottom: .01rem solid #8d1dfd;
    padding: .2rem 0;
    margin: .2rem 0;

    .title {
      line-height: .6rem;
      font-size: .4rem;
      color: #333;
    }

    .desc {
      line-height: .5rem;
      font-size: .3rem;
      color: #666;
    }
  }
}

/*main[data-v-2e327700] {}*/
/*main[data-v-96c7cc18]*/
</style>
